<script lang="ts" setup>
useDark()
const a = ref(0)
const b = computed(() => ((5 ** 0.5 + 1) * a.value) / 2)
const h = computed(() => a.value + b.value)
</script>

<template>
  <div class="grid min-h-full place-content-center">
    <section
      class="max-w-md rounded-md border border-opacity-5 bg-white p-6 shadow-lg dark:border-none dark:bg-transparent"
    >
      <h2 class="text-2xl font-semibold capitalize text-gray-700 dark:text-gray-300">
        完美身高计算
      </h2>
      <form @submit.prevent>
        <div class="mt-4 grid grid-cols-1 gap-6">
          <label class="text-gray-700 dark:text-gray-300">
            头顶到肚脐眼的高度（cm）
            <input
              type="number"
              placeholder="头顶到肚脐眼的高度"
              v-model.trim.number="a"
              step="0.01"
              autofocus
              min="0"
              class="mt-2 block w-full rounded-md border border-gray-300 bg-transparent px-4 py-2 text-gray-700 outline-none transition focus:border-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-300"
            />
          </label>
          <label class="text-gray-700 dark:text-gray-300">
            理想身高（cm）
            <input
              type="text"
              placeholder="与理想身高的差距"
              :value="h"
              readonly
              class="mt-2 block w-full rounded-md border border-gray-300 bg-transparent px-4 py-2 text-gray-700 outline-none transition focus:border-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-300"
            />
          </label>
        </div>
      </form>
    </section>
  </div>
</template>
